<template>
  <div class="dashboard">
    <!-- 顶部标题区 -->
    <div class="header">
      <h1>医疗管理系统</h1>
      <p>专注于排班与诊疗流程管理的高效平台</p>
    </div>

    <!-- 主内容：1:1比例布局（各占50%宽度） -->
    <div class="dashboard-body">
      <!-- 核心功能板块（左半部分） -->
      <div class="panel function-panel">
        <div class="panel-title">
          <span class="icon">❖</span>
          核心功能板块
        </div>
        <div class="function-list">
          <div class="function-item" v-for="(item, index) in functions" :key="item.title">
            <div class="item-icon" :class="`icon-${index + 1}`">
              <el-icon :is="item.icon" />
            </div>
            <div class="item-text">
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能介绍板块（右半部分） -->
      <div class="panel intro-panel">
        <div class="panel-title">
          <span class="icon">ℹ️</span>
          功能介绍
        </div>
        <div class="intro-content">
          <h3>系统核心功能</h3>
          <p>
            平台聚焦医疗流程关键环节，通过四大功能模块实现高效管理：排班管理优化医生出诊安排，问诊记录规范诊疗过程，
            挂号列表实时掌握就诊队列，权限管理保障系统数据安全。
          </p>
          <h3>各模块作用</h3>
          <ul>
            <li>排班管理：支持多科室排班计划制定，自动冲突检测</li>
            <li>问诊记录：标准化病历模板，支持历史记录追溯查询</li>
            <li>挂号列表：实时更新挂号状态，支持队列调整与叫号管理</li>
            <li>权限管理：基于角色的权限分配，细粒度控制功能访问</li>
          </ul>
          <h3>使用提示</h3>
          <ul>
            <li>排班信息需提前3天维护，确保患者预约准确</li>
            <li>问诊记录提交后72小时内可编辑，逾期自动归档</li>
            <li>权限变更需管理员审核，生效后即时刷新权限</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Calendar, Document, List, Lock } from '@element-plus/icons-vue'

// 核心功能数据
const functions = [
  { title: '排班管理', desc: '管理医生排班计划与出诊时间安排', icon: Calendar },
  { title: '问诊记录', desc: '记录与查询患者诊疗详情及病历信息', icon: Document },
  { title: '挂号列表', desc: '查看患者挂号信息与就诊队列状态', icon: List },
  { title: '权限管理', desc: '配置用户角色与系统功能访问权限', icon: Lock }
]
</script>

<style scoped>
/* 全局容器：渐变背景提升层次感 */
.dashboard {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
}

/* 顶部标题：强化层级 */
.header {
  margin-bottom: 24px;
}
.header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}
.header p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

/* 主内容：1:1比例 + 舒适间距 */
.dashboard-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-start;
}

/* 面板通用样式：卡片化设计 + 动态交互 */
.panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 24px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 面板标题：渐变底框 + 符号强化 */
.panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #3b82f6, #646cff) 1; /* 渐变分割线 */
}
.panel-title .icon {
  font-size: 22px;
  color: #3b82f6;
}

/* 核心功能列表：模块化色彩 + 交互动效 */
.function-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.function-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s;
  background: #f9fafc;
}
.function-item:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 功能项图标：模块化色彩区分 */
.item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.icon-1 { background: #e0f2fe; color: #0284c7; } /* 排班管理 */
.icon-2 { background: #dcfce7; color: #16a34a; } /* 问诊记录 */
.icon-3 { background: #fef3c7; color: #d97706; } /* 挂号列表 */
.icon-4 { background: #dbeafe; color: #2563eb; } /* 权限管理 */
.item-icon el-icon { font-size: 20px; }

/* 功能项文本：清晰层级 */
.item-text h3 {
  font-size: 16px;
  margin: 0 0 6px 0;
  color: #1e293b;
}
.item-text p {
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
}

/* 功能介绍内容：结构化排版 + 视觉引导 */
.intro-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.8;
}
.intro-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 24px 0 12px 0;
  position: relative;
  padding-left: 12px;
}
.intro-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #3b82f6;
  border-radius: 2px;
}
.intro-content ul {
  padding-left: 24px;
  margin: 0 0 16px 0;
}
.intro-content li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 12px;
}
.intro-content li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: bold;
}

/* 响应式适配：小屏幕友好 */
@media (max-width: 768px) {
  .dashboard-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .panel {
    padding: 20px;
  }
}
</style>